<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 1034 1024"
    preserveAspectRatio="xMidYMid meet"
    fill=""
    role="presentation"
    ref="host"
  >
    <g><path d="M966.482 532.48H853.166c-11.264 0-20.48-9.216-20.48-20.48s9.216-20.48 20.48-20.48h113.316c11.264 0 20.48 9.216 20.48 20.48s-9.216 20.48-20.48 20.48zm-780.288 0H72.878c-11.264 0-20.48-9.216-20.48-20.48s9.216-20.48 20.48-20.48h113.316c11.264 0 20.48 9.216 20.48 20.48s-9.216 20.48-20.48 20.48zM910.51 429.742c-9.216 0-17.408-6.144-19.804-15.36-35.154-133.806-139.94-238.592-273.408-273.408-10.916-2.734-17.408-13.998-14.674-24.924 2.734-10.916 13.998-17.408 24.914-14.674C775.342 140.288 891.392 256 930.304 404.142c2.734 10.916-3.758 22.18-14.674 24.914a26.378 26.378 0 0 1-5.12.686zm-781.66 0c-1.7 0-3.41-.348-5.12-.686-10.916-2.734-17.408-13.998-14.674-24.914C147.63 256.338 263.68 140.288 411.474 101.714c10.926-2.724 22.19 3.758 24.924 14.684 2.724 10.916-3.758 22.18-14.684 24.914-133.458 35.154-238.244 139.602-273.06 273.07-2.396 9.216-10.588 15.36-19.804 15.36zm291.502 493.906c-1.71 0-5.12 0-8.878-1.024C264.018 883.712 148.306 768 109.056 620.206c-2.734-10.926 3.758-22.19 14.674-24.924 10.926-2.724 22.19 3.758 24.924 14.684 35.154 133.458 139.602 237.906 272.384 273.06a20.413 20.413 0 0 1 19.794 20.48c0 10.926-9.216 20.142-20.48 20.142zm198.994 0c-11.264 0-20.48-9.216-20.48-20.48s8.878-20.142 19.804-20.48c132.772-35.154 236.882-139.602 272.036-272.722 2.734-10.926 13.998-17.408 24.924-14.684 10.916 2.734 17.408 13.998 14.674 24.924C891.73 768 776.018 883.712 628.224 922.624c-3.758 1.024-7.168 1.024-8.878 1.024zm-99.666 55.634c-11.264 0-20.48-9.216-20.48-20.48V845.486c0-11.264 9.216-20.48 20.48-20.48s20.48 9.216 20.48 20.48v113.316c0 11.264-9.216 20.48-20.48 20.48zm0-780.288c-11.264 0-20.48-9.216-20.48-20.48V65.198c0-11.264 9.216-20.48 20.48-20.48s20.48 9.216 20.48 20.48v113.316c0 11.264-9.216 20.48-20.48 20.48zm0 396.288c-46.08 0-83.282-37.54-83.282-83.282 0-46.08 37.54-83.282 83.282-83.282 46.08 0 83.282 37.54 83.282 83.282 0 46.08-37.202 83.282-83.282 83.282z" data-follow-fill="#0389FF" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Icona4 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
